<template>
    <div class="music-list-wrapper">
        <div class="back">
            <i class="icon-back" @click='back'></i>
        </div>
        <h1 class="title" v-html='title'></h1>
        <!-- 占位背景图-->
        <div class="bg-image" :style="bgStyle" ref="bgImage">
            <div class="filter"></div>
            <div class="play-wrapper" ref='playWrapper'>
                <div class="play-group" @click='randomItem'>
                    <span class='text'><i class='icon-play'></i>随机播放全部</span>
                </div>
            </div>
        </div>
        <!-- 移动遮罩层 -->
        <div class='cover' ref='cover'></div>
        <!-- BScroll区域 -->
        <div class="songs-wrapper" ref='songsWrapper'>
            <Scroll
                    v-if='songs.length>0'
                    :probeType='3'
                    :listenScroll='true'
                    @scroll='scroll'
                    ref='scroll'
            >
                <SongList :songs="songs" :rank="rank" @selectItem="selectItem"></SongList>
            </Scroll>
        </div>
        <div class="loading-wrapper" v-show='songs.length===0'>
            <Loading></Loading>
        </div>
    </div>
</template>
<script>
    import Scroll from '@/base/scroll';
    import Loading from '@/base/loading';
    import SongList from '@/base/song-list';
    import { playlistMixin } from '@/common/js/mixin';

    const RESERVED_HEIGHT = 40;
    const PLAYER_HEIGHT = 60;
    export default {
        mixins: [playlistMixin],
        name: 'music-list',
        // 背景图 歌手名 歌曲列表
        props: {
            bgImage: {
                type: String,
                default: '',
            },
            songs: {
                type: Array,
                default: [],
            },
            title: {
                type: String,
                default: '',
            },
            rank: {
                type: Boolean,
                default: false,
            },
        },
        computed: {
            bgStyle() {
                return `background-image:url(${this.bgImage})`;
            },
        },
        methods: {
            // todo
            // mixin
            handlePlayList(list) {
                if (list.length > 0) {
                    this.$refs.songsWrapper.style.bottom = `${PLAYER_HEIGHT}px`;
                } else {
                    this.$refs.songsWrapper.style.bottom = 0;
                }
                this.$refs.scroll && this.$refs.scroll.refresh();
            },
            selectItem(obj) {
                this.$emit('selectItem', obj);
            },
            randomItem() {
                this.$emit('randomItem');
            },
            back() {
                this.$router.back();
            },
            scroll(pos) {
                let scale = 1;
                let blur = 0;
                this.deltaH = this.imageHeight + pos.y;
                this.$refs.cover.style.transform = `translate3d(0,${pos.y}px,0)`;
                // 向上滚动的情况
                if (this.deltaH <= RESERVED_HEIGHT) {
                    // 边界情况 当滚动超过RESERVED_HEIGHT时,让背景图的位置置顶
                    this.$refs.bgImage.style.zIndex = 2;
                    this.$refs.bgImage.style.paddingTop = 0;
                    this.$refs.bgImage.style.height = `${RESERVED_HEIGHT}px`;
                    this.$refs.playWrapper.style.display = 'none';
                } else {
                    // 正常情况下,背景图回复正常
                    this.$refs.bgImage.style.zIndex = 0;
                    this.$refs.bgImage.style.paddingTop = '70%';
                    this.$refs.bgImage.style.height = 0;
                    this.$refs.playWrapper.style.display = '';
                }
                // 向下滚动的情况,背景图放大
                if (pos.y > 0) {
                    this.$refs.bgImage.style.zIndex = 2;
                    scale = 1 + (pos.y / this.imageHeight);
                    blur = Math.min(20, (scale - 1) * 20);
                    this.$refs.bgImage.style.transform = `scale(${scale})`;
                    this.$refs.bgImage.style.transform = `blur${blur}px`;
                }
            },
        },
        mounted() {
            this.imageHeight = this.$refs.bgImage.clientHeight;
            this.$refs.songsWrapper.style.top = `${this.imageHeight}px`;
        },
        components: {
            Scroll,
            Loading,
            SongList,
        },
    };
</script>
<style lang='stylus' scoped>
    @import "~styl/var"
    @import "~styl/mixin"
    .music-list-wrapper
        position fixed
        z-index $higher
        top 0
        left 0
        width 100%
        height 100%
        background $color-background
        .back
            position absolute
            top 0
            left 6px
            z-index $higher
            .icon-back
                display block
                padding 10px
                line-height 20px
                color $color-theme
        .title
            position absolute
            text-align center
            font-size $font-size-large
            color $color-text
            z-index $higher
            line-height 40px
            left 50px
            right 50px
        .bg-image
            position relative
            width 100%
            height 0
            padding-top 70%
            transform-origin top
            background-size cover
            blur 20px
            .play-wrapper
                position absolute
                bottom 20px
                left 0
                width 100%
                text-align center
                .play-group
                    display inline-block
                    border 1px solid $color-theme
                    color $color-theme
                    border-radius 100px
                    font-size 0
                    box-sizing border-box
                    width 135px
                    padding 7px 0
                    .text
                        display inline-block
                        font-size $font-size-small
                        i
                            display inline-block
                            vertical-align text-bottom
                            margin-right 6px
                            font-size $font-size-medium-x
            .filter
                position absolute
                top 0
                left 0
                width 100%
                height 100%
                background rgba(7, 17, 27, 0.4)
        .cover
            position absolute
            background $color-background
            left 0
            width 100%
            height 100%
        .songs-wrapper
            position fixed
            bottom 0
            left 0
            right 0
        .loading-wrapper
            position relative
</style>
